<template>
  <div>
    <el-button
      type="danger"
      plain
      icon="delete"
      @click="dialogVisible = true"
      :disabled="selection.length === 0"
    >
      取消授权
    </el-button>
    <el-dialog
      title="取消授权"
      v-model="dialogVisible"
      width="70%"
      style="border-radius: 10px; padding: 5px 10px"
    >
      <h3>你将取消授权以下用户</h3>
      <el-table
        :data="selection"
        :row-key="(row) => row.id"
        border
        style="margin-top: 20px"
      >
        <el-table-column
          prop="username"
          label="用户名"
          width="150"
          align="center"
        />

        <el-table-column prop="num" label="工号" align="center" />

        <el-table-column prop="name" label="姓名" width="150" align="center" />

        <el-table-column
          prop="thirdName"
          label="三级部门"
          width="180"
          align="center"
        />

        <el-table-column
          prop="fourthName"
          label="四级部门"
          width="180"
          align="center"
        />
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="row.state == '0' ? 'danger' : 'success'">
              {{ row.state == '0' ? '停用' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import eventBus from '@/utils/event-bus';
import { accreditUser } from '@/service/api/role';

const dialogVisible = ref(false);
const commitForm = ref({
  roleId: 0,
  userIds: [],
});

const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
});

//提交
const submit = async () => {
  const ids = [];
  props.selection.forEach((item) => {
    ids.push(item.id);
  });
  commitForm.value.userIds = ids;
  await accreditUser(commitForm.value);
  dialogVisible.value = false;
  eventBus.emit('getAccreditUserList');
};
</script>
<style lang="scss">
.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
